<template>
  <baseslot>
    <template v-slot:search-box>
      <SearchBox @search="search">
        <div class="common-search-item">
          <div class="label">时间选择:</div>
          <el-date-picker
            v-model="selectyear"
            type="year"
            placeholder="选择年"
            value-format="yyyy"
          />
        </div>
      </SearchBox>
    </template>
    <template v-slot:table-box>
      <div class="seeding-main">
        <div v-if="true" class="seeding-side">
          <div class="seeding-side-title">选择批次</div>
          <div class="seeding-side-menu">
            <div
              v-for="(item,index) in batchList"
              :key="index"
              class="side-menu-item"
              :class="index === batchindex?'side-menu-item-select':''"
              :title="item.batchName"
              @click="selectbatch(item,index)"
            >
              <!-- {{ item.batchName.substring(0,13) }} -->
              {{ item.batchName }}
            </div>
          </div>
        </div>
        <div class="seeding-right-main">
          <div class="right-main-top">
            <div class="main-top-title">长势图展示</div>
            <div class="main-top-view">
              <div
                v-for="(item,index) in growimagelist"
                :key="index"
                class="show-view-item"
                :class="index === nowgrowimageindex?'show-view-item-slect':''"
                @click="getdatapictureid(item.zhid,index)"
              >
                <template v-if="item && item.zhid">
                  <div
                    v-if="item.name"
                    class="view-item-image-name"
                  >{{ item.name }}</div>
                  <img
                    :src="item.value"
                    class="view-item-image"
                    :height="setimageheight(index)"
                    :width="setimagewidth(index)"
                  />
                </template>
              </div>
            </div>
          </div>
          <div class="right-main-center">
            <div class="main-center-title">采集数据图片列表</div>
            <div
              v-if="weatherdata[0]"
              class="main-center-nowdate"
            >{{ weatherdata[0].date }}</div>
            <div class="main-center-data">
              <div
                v-for="(item,index) in weatherdata"
                :key="index"
                class="center-data-item"
              >
                <img class="data-item-img" :src="item.imagurl" />
                <div class="data-item-zhi">
                  <div>{{ item.baifenbi }}</div>
                  <div>{{ item.dataname }}</div>
                </div>
                <div v-if="index + 1 < weatherdata.length" class="colum-line"></div>
                <div
                  v-if="index + 1 === weatherdata.length"
                  style="width:2px;height:50px;"
                ></div>
                <!-- <div class="data-item-date">{{ item.date }}</div> -->
              </div>
            </div>
            <div class="main-center-image">
              <div class="pest-main-bottom">
                <div class="pest-bottom-left" @click="minpagesize"></div>
                <div class="pest-bottom-center">
                  <div
                    v-for="(item, index) in centerimageList"
                    :key="index"
                    class="bottom-center-item"
                    :class="imageselectindex === index ?'bottom-center-item-select':''"
                    @click="setimageindex(item,index)"
                  >
                    <div
                      class="testline"
                      @click="showbigimg(item.pictureData)"
                    >查看大图</div>
                    <img class="bottom-center-item-img" :src="item.pictureData" />
                    <div class="bottom-center-item-line">
                      {{ item.collectDate }}
                      <span style="width:10px;"></span>
                      {{ item.collectSettingTime }}
                    </div>
                  </div>
                </div>
                <div class="pest-bottom-right" @click="addpagesize"></div>
              </div>
              <div class="bot-slider">
                <el-slider
                  v-model="currentpage"
                  :show-tooltip="true"
                  :min="1"
                  :max="currentpagemax"
                  @change="getdatapictureid()"
                />
              </div>
            </div>
          </div>
          <div class="right-main-bottom">
            <div class="main-bottom-title">物联网数据</div>
            <div class="main-bottom-echart">
              <lineechart
                :cdata="cdatatwo"
                :nowwidth="'100%'"
                :nowheight="'200px'"
                :isshowleg="true"
                :font-size="15"
              />
            </div>
          </div>
          <div style="margin-bottom:0px;height:18px;width:100%;"></div>
        </div>
      </div>
    </template>
    <template v-slot:dialog>
      <el-dialog
        class="zh-new-dialog"
        width="1000px"
        :visible.sync="isshowbigimg"
      >
        <div style="width:950px;margin-left:25px;">
          <img :src="nowselectimgUrl" width="950px" />
        </div>
      </el-dialog>
    </template>
  </baseslot>
</template>
<script>
import lineechart from "@/components/Echarts/components/linechart/charttwo.vue";
import baseslot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
import growthRecordreq from "@/api/digital-production/growth-record-management/growth-record-managementtwo/index";
import nowpagereq from "@/api/digital-production/growth-record-management/seedling-growth-analysis";
import SearchBox from "@/components/SearchBox";
export default {
  components: {
    baseslot,
    lineechart,
    SearchBox
  },
  data() {
    return {
      selectyear: "",
      // datelist: [],
      // 中间点击图片相关
      nowimagemes: [],
      isshowbigimg: false,
      currentpage: 1,
      currentpagemax: 1,
      currentsize: 4,
      imageselectindex: 0,
      centerimageList: [
        // { name: '11', value: require('@/assets/grow-shuidao/tutu.png') },
        // { name: '11', value: require('@/assets/grow-shuidao/tutu.png') },
        // { name: '22', value: require('@/assets/grow-shuidao/tutu.png') }
      ],
      nowselectimgUrl: "",
      // 长势图
      growimagelist: [
        // { name: '发芽', value: require('@/assets/grow-shuidao/水稻种子发芽.png') },
        // { name: '插秧', value: require('@/assets/grow-shuidao/水稻插秧期.png') },
        // { name: '分叶期', value: require('@/assets/grow-shuidao/水稻分葉期.png') },
        // { name: '拔节期', value: require('@/assets/grow-shuidao/水稻拔节期.png') },
        // { name: '抽穗期', value: require('@/assets/grow-shuidao/水稻抽穗期.png') },
        // { name: '灌浆期', value: require('@/assets/grow-shuidao/水稻灌浆期.png') },
        // { name: '熟期', value: require('@/assets/grow-shuidao/水稻成熟期.png') }
      ],
      nowgrowimageindex: 0,
      // 采集数据
      // 当前选择日期的数据
      weatherdata: [
        {
          imagurl: require("@/assets/grow-shuidao/3.png"),
          baifenbi: "47.5%",
          dataname: "光照度",
          date: "01/31 14:35"
        },
        {
          imagurl: require("@/assets/grow-shuidao/4.png"),
          baifenbi: "37.5%",
          dataname: "土壤湿度",
          date: "01/31 14:35"
        },
        {
          imagurl: require("@/assets/grow-shuidao/2.png"),
          baifenbi: "52.5%",
          dataname: "二氧化碳",
          date: "01/31 14:35"
        },
        {
          imagurl: require("@/assets/grow-shuidao/1.png"),
          baifenbi: "67.5%",
          dataname: "空气湿度",
          date: "01/31 14:35"
        }
      ],
      batchindex: 0,
      batchList: [
        // { batchName: '2020双季水稻第一批', batchNo: '1' }
      ],
      searchlist: {},
      cdatatwo: {
        xAxisdata: [],
        xData: [],
        seriesData: []
        // xAxisdata: ["1时", "2时", "3时", "4时", "5时", "6时", "7时", "8时", "9时", "10时"],
        // xData: ["物联网数据"],
        // seriesData: [
        //   {
        //     name: '物联网数据',
        //     type: 'line',
        //     data: [1500, 1454, 2444, 1806, 5349, 3055, 3309, 1430, 3474, 2384],
        //     barWidth: 10,
        //     itemStyle: {
        //       normal: {
        //         barBorderRadius: 5,
        //         color: new this.$echarts.graphic.LinearGradient(1, 0, 0, 1, [
        //           { offset: 0, color: "#04FA99" },
        //           { offset: 1, color: "#3EACE5" }
        //         ])
        //       }
        //     },
        //     z: -12
        //   }
        // ]
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      }
    };
  },
  mounted() {
    this.getallbatchList();
  },
  methods: {
    // 新的选择批次-以新用旧
    newselectbat(e) {
      // console.log(e)
      this.selectbatch(this.batchList[e], e);
    },
    // 展示大图
    showbigimg(e) {
      this.isshowbigimg = true;
      this.nowselectimgUrl = e;
    },
    // 获取批次
    getallbatchList() {
      let params = {
        status: false
        // startTime: this.datelist[0],
        // endTime: this.datelist[1]
      };
      if (this.selectyear && this.selectyear.length > 0) {
        params.startTime = `${this.selectyear}-01-01 00:00:01`;
        params.endTime = `${this.selectyear}-12-30 23:59:59`;
      }
      growthRecordreq.getallbatchList(params).then(res => {
        this.batchList = res.data;
        this.getgrowtop();
        // this.getdatapictureid()
        this.getaxiosechart();
      });
    },
    // 获取长势图相关信息
    async getgrowtop() {
      this.growimagelist = [];
      let id = this.batchList[this.batchindex].batchNo;
      let plantdata = await nowpagereq.getnowgrowid(id);
      let nowplantid = plantdata.data;
      if (!nowplantid) {
        this.nowgrowimageindex = 0;
      }
      let zhres = await nowpagereq.getgrowtop(id);
      let oldlist = zhres.data;
      let zholdlist = [];
      oldlist.forEach(async (item, index) => {
        if (nowplantid && item.growthPhaseId === nowplantid) {
          this.nowgrowimageindex = index;
          let zhgrowthPhaseId = nowplantid;
          // console.log(zhgrowthPhaseId)
          this.getdatapictureid(zhgrowthPhaseId, this.nowgrowimageindex);
        }
        let imgmes = await nowpagereq.getgrowtopimg(item.pictureId);
        let newpicture = imgmes.data;
        if (newpicture) {
          let pusobj = {
            zhid: item.growthPhaseId,
            name: item.phaseName || "",
            value: `data:image/png;base64,${newpicture.pictureData}`
          };
          await this.$set(zholdlist, index, pusobj);
          // zholdlist.push(pusobj)
          this.growimagelist = zholdlist;
        }
      });
    },
    // 获取中间可分页的图片
    async getdatapictureid(zhgrowthPhaseId, zhnewi) {
      if (zhnewi) {
        this.nowgrowimageindex = zhnewi;
        console.log(zhnewi);
        // console.log("中" + zhgrowthPhaseId)
      } else {
        this.nowgrowimageindex = 0;
      }
      this.centerimageList = [];
      let paramsone = {
        pageSize: 3,
        batchNo: this.batchList[this.batchindex].batchNo,
        growthPhaseId: zhgrowthPhaseId
      };
      console.log(this.currentpage);
      if (zhgrowthPhaseId) {
        let resone = await nowpagereq.newgetdatapictureid(paramsone);
        if (resone.data.currentPage) {
          this.currentpage = Number(resone.data.currentPage);
          this.currentpagemax = Number(resone.data.totalPages);
        }
      }
      let paramstwo = {
        page: this.currentpage,
        size: 3,
        batchNo: this.batchList[this.batchindex].batchNo
      };
      let res = await nowpagereq.getdatapictureid(paramstwo);
      let list = res.data.content;
      // this.currentpagemax = res.data.totalPages
      if (list && list.length > 0) {
        list.forEach(async (item, index) => {
          let resone = await nowpagereq.getpicmesbypicid(item.pictureId);
          let restwo = await nowpagereq.getdataitembycollid(
            item.collectRecordId
          );
          if (resone.data) {
            let newurl = "data:image/png;base64," + resone.data.picture;
            this.$set(list[index], "pictureData", newurl);
            // list[index]["pictureData"] = 'data:image/png;base64,' + resone.data.picture
          } else {
            list[index][
              "pictureData"
            ] = require("@/assets/oth-img/index-bgc.png");
          }
          if (restwo.data && restwo.data.length > 0) {
            list[index]["dataItemList"] = JSON.parse(
              JSON.stringify(restwo.data)
            );
          }
          if (index === 0) {
            this.setimageindex(this.centerimageList[0], 0);
          }
        });
      }
      this.centerimageList = list;
    },
    // 获取echart图
    async getaxiosechart() {
      // 临时演示
      this.weatherdata = [];
      this.cdatatwo = {
        xAxisdata: [],
        xData: [],
        seriesData: [],
        rightShow: true
      };
      let nowbatchNo = this.batchList[this.batchindex]["batchNo"];
      let resone = await nowpagereq.getdataitemlist(nowbatchNo);
      // console.log(resone.data)
      if (resone.data) {
        let dataitemlistone = resone.data;
        let dataitemlisttwo = [];
        dataitemlistone.forEach(async (item, index) => {
          // if(dataitemlisttwo.length>0){
          //   dataitemlisttwo.forEach(
          //     (zzitemtwo,zzindextwo)=>{
          //       if(zzitemtwo.dataItemId)
          //     }
          //   )
          // }
          if (dataitemlisttwo.indexOf(item.dataItemId) === -1) {
            // console.log(item.dataItemId)
            // console.log(dataitemlisttwo.indexOf(item.dataItemId))
            dataitemlisttwo.push(item.dataItemId);
            if (item.dataItemId === 5027) {
              return;
            }
            let zhrestwo = await nowpagereq.getdatabydataitemid({
              batchNo: nowbatchNo,
              dataItemId: item.dataItemId
            });
            this.cdatatwo.xAxisdata = zhrestwo.data.date;
            if (item.dataItemName.indexOf("光照度") !== -1) {
              this.cdatatwo.xData.push(item.dataItemName);
              this.cdatatwo.seriesData.push({
                name: item.dataItemName,
                type: "line",
                symbol: "none",
                smooth: true,
                data: zhrestwo.data.data,
                yAxisIndex: "1"
              });
            } else {
              this.cdatatwo.xData.push(item.dataItemName);
              this.cdatatwo.seriesData.push({
                symbol: "none",
                smooth: true,
                name: item.dataItemName,
                type: "line",
                data: zhrestwo.data.data,
                yAxisIndex: "0"
              });
            }
          }
        });
        // resone.data.forEach(
        //   async (item, index) => {
        //     if (item.dataItemId === 5027) {
        //       return
        //     }
        //     let zhrestwo = await nowpagereq.getdatabydataitemid({
        //       batchNo: nowbatchNo,
        //       dataItemId: item.dataItemId
        //     })
        //     this.cdatatwo.xAxisdata = zhrestwo.data.date
        //     this.cdatatwo.seriesData.push(
        //       {
        //         name: item.dataItemName,
        //         type: 'line',
        //         data: zhrestwo.data.data
        //       }
        //     )
        //   }
        // )
      }
    },
    // 下一页
    addpagesize() {
      this.currentpage = this.currentpage + 1;
      if (this.currentpage > this.currentpagemax) {
        this.$message.warning("已经到最后一页了");
        return;
      }
      this.getdatapictureid();
      // this.getimagemessage(this.insectDeviceId)
      this.$message.success("下一页获取成功");
    },
    // 上一页
    minpagesize() {
      this.currentpage = this.currentpage - 1;
      if (this.currentpage < 1) {
        this.currentpage = 1;
        this.$message.warning("页数已为1");
        return;
      }
      this.getdatapictureid();
      // this.getimagemessage(this.insectDeviceId)
      this.$message.success("上一页获取成功");
    },
    setimageindex(e, i) {
      let testlist = JSON.parse(JSON.stringify(e));
      this.nowimagemes = testlist.dataItemList;
      this.weatherdata = [];
      // console.log(testlist.dataItemList)
      if (testlist.dataItemList && testlist.dataItemList.length > 0) {
        testlist.dataItemList.forEach(item => {
          let parlist = {
            imagurl: require("@/assets/grow-shuidao/4.png"),
            baifenbi: item.dataItemValue + item.symbol,
            dataname: item.dataTypeName,
            date: this.zhdata(item.collectDataTime)
          };
          switch (item.dataTypeId) {
            case 55:
              // 酸碱度
              parlist.imagurl = require("@/assets/grow-shuidao/6.png");
              break;
            case 14:
              // 光照度
              parlist.imagurl = require("@/assets/grow-shuidao/3.png");
              break;
            case 13:
              // 空气湿度
              parlist.imagurl = require("@/assets/grow-shuidao/5.png");
              break;
            case 12:
              // 空气温度
              parlist.imagurl = require("@/assets/grow-shuidao/1.png");
              break;
            case 11:
              // 土壤湿度
              parlist.imagurl = require("@/assets/grow-shuidao/4.png");
              break;
            default:
              parlist.imagurl = require("@/assets/grow-shuidao/2.png");
              break;
          }
          this.weatherdata.push(parlist);
          // console.log(parlist)
        });
      } else {
        this.weatherdata = [
          {
            imagurl: require("@/assets/grow-shuidao/3.png"),
            baifenbi: "-%",
            dataname: "光照度",
            date: "01/31 14:35"
          },
          {
            imagurl: require("@/assets/grow-shuidao/4.png"),
            baifenbi: "-°C",
            dataname: "土壤温度",
            date: "01/31 14:35"
          },
          {
            imagurl: require("@/assets/grow-shuidao/2.png"),
            baifenbi: "-%",
            dataname: "二氧化碳",
            date: "01/31 14:35"
          },
          {
            imagurl: require("@/assets/grow-shuidao/1.png"),
            baifenbi: "-°C",
            dataname: "空气温度",
            date: "01/31 14:35"
          },
          {
            imagurl: require("@/assets/grow-shuidao/5.png"),
            baifenbi: "-%",
            dataname: "空气湿度",
            date: "01/31 14:35"
          }
        ];
      }
      this.imageselectindex = i;
    },
    setimageheight(i) {
      let zhheight = 60 + 20 * i;
      return zhheight + "px";
    },
    setimagewidth(i) {
      let zhwidth = 30 + 20 * i;
      return zhwidth + "px";
    },
    // 时间转化方法
    zhdata(originDate) {
      const dt = new Date(originDate);
      // const y = dt.getFullYear();
      const m = (dt.getMonth() + 1 + "").padStart(2, "0");
      const d = (dt.getDate() + "").padStart(2, "0");
      const hh = (dt.getHours() + "").padStart(2, "0");
      const mm = (dt.getMinutes() + "").padStart(2, "0");
      // const ss = (dt.getSeconds() + "").padStart(2, "0");
      return `${m}/${d} ${hh}:${mm}`;
    },
    // 批次选择
    selectbatch(e, i) {
      this.growimagelist = [];
      this.currentpage = 1;
      this.batchindex = i;
      this.getgrowtop();
      // this.getdatapictureid()
      this.getaxiosechart();
    },
    // 搜索
    search() {
      this.batchList = [];
      this.getallbatchList();
      console.log("1");
    }
  }
};
</script>
<style lang="scss" scoped>
.seeding-main {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.seeding-side {
  width: 200px;
  // height: 100%;
  color: #fff;
  background-color: #094054;
  .seeding-side-title {
    width: 200px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    border-bottom: #fff 1px dashed;
    margin-bottom: 10px;
  }
  .seeding-side-menu {
    width: 200px;
    max-height: calc(100% - 51px);
    border: #fff 1px solid;
    overflow-y: auto;
    overflow-x: hidden;
    // overflow: auto;
    .side-menu-item {
      width: 200px;
      height: 50px;
      line-height: 50px;
      text-align: center;
      font-size: 14px;
      border-bottom: #fff 1px solid;
      white-space: nowrap;
      cursor: pointer;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 20px;
    }
    .side-menu-item-select {
      background-image: linear-gradient(to bottom, #75efd2, #44cec6, #0fa2ba);
    }
  }
}
.seeding-right-main {
  width: calc(100% - 210px);
  // width: calc(100%);
  height: 100%;
  // border: springgreen 1px solid;
  .right-main-top {
    width: 100%;
    height: 300px;
    margin-bottom: 10px;
    background-color: #094054;
    .main-top-title {
      width: 100%;
      height: 40px;
      text-align: center;
      line-height: 40px;
      font-weight: 600;
      font-size: 18px;
    }
    .main-top-view {
      width: 100%;
      height: 270px;
      display: flex;
      flex-wrap: nowrap;
      // align-items: center;
      justify-content: space-around;
      .show-view-item {
        width: 150px;
        height: 260px;
        cursor: pointer;
        background-size: 150px 260px;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        .view-item-image {
          margin-top: 40px;
          // width: 150px;
          // height: 180px;
        }
        .view-item-image-name {
          width: 150px;
          height: 40px;
          line-height: 40px;
          text-align: center;
          font-weight: 600;
        }
      }
      .show-view-item-slect {
        background-image: url("~@/assets/grow-shuidao/kuangkuang.png");
      }
    }
  }
  .right-main-center {
    width: 100%;
    height: 380px;
    margin-bottom: 10px;
    background-color: #094054;
    .main-center-title {
      width: 100%;
      text-align: center;
      height: 30px;
      line-height: 30px;
      font-size: 18px;
      font-weight: 600;
    }
    .main-center-nowdate {
      margin-left: 5%;
      width: 200px;
    }
    .main-center-data {
      margin: 5px 5%;
      width: 90%;
      height: 80px;
      border: #2a5c6c dashed 1px;
      display: flex;
      // overflow-y: auto;
      justify-content: space-around;
      .center-data-item {
        width: 230px;
        height: 80px;
        // border: solid 1px #fff;
        display: flex;
        align-items: center;
        justify-content: space-around;
        .data-item-img {
          max-width: 50px;
          max-height: 50px;
        }
        .data-item-zhi {
          font-weight: 600;
        }
        .colum-line {
          width: 2px;
          height: 50px;
          background-image: linear-gradient(#094054, #fff, #094054);
        }
        // .data-item-date{
        // }
      }
      .center-data-item:nth-child(1) {
        margin-left: 10px;
      }
    }
    .main-center-image {
      width: 100%;
      height: 300px;
      cursor: pointer;
      .bot-slider {
        width: calc(97.5% - 160px);
        margin-left: calc(2% + 85px);
        ::v-deep .el-slider__bar {
          background-color: #00c69e;
        }
      }
    }
  }
  .right-main-bottom {
    width: 100%;
    height: 250px;
    margin-bottom: 10px;
    background-color: #094054;
    .main-bottom-title {
      width: 100%;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 18px;
      font-weight: 600;
    }
    .main-bottom-echart {
      width: 100%;
      height: 210px;
      padding-left: 10px;
      padding-top: 10px;
    }
  }
}
.pest-main-bottom {
  width: 97.5%;
  margin-left: 2%;
  margin-top: 10px;
  height: 200px;
  min-height: 100px;
  overflow: auto;
  // border: solid 1px #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;

  .pest-bottom-left {
    width: 60px;
    height: 60px;
    margin-left: 10px;
    background-image: url("~@/assets/sxw-pest/left.png");
    background-repeat: no-repeat;
    background-size: 60px;
    cursor: pointer;
  }
  .pest-bottom-center {
    width: calc(100% - 160px);
    height: 180px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .bottom-center-item {
      box-sizing: border-box;
      width: 25%;
      height: 180px;
      border: teal 1px solid;
      position: relative;
      // display: flex;
      // align-items: center;
      .bottom-center-item-img {
        width: 100%;
        height: 178px;
      }
      .testline {
        display: none;
        width: 100%;
        text-align: center;
        height: 50px;
        line-height: 50px;
        position: absolute;
        top: 65px;
      }
      .testline:hover {
        color: cyan;
      }
      .bottom-center-item-line {
        position: relative;
        bottom: 44px;
        height: 40px;
        line-height: 40px;
        width: 100%;
        background-color: rgba(72, 88, 99, 0.7);
        color: cornsilk;
        text-align: center;
        font-size: 18px;
      }
    }
    .bottom-center-item-select {
      border: #00c69e 4px solid;
      height: 187px !important;
    }
    .bottom-center-item:hover {
      .testline {
        display: block;
      }
    }
  }
  .pest-bottom-right {
    width: 60px;
    height: 60px;
    margin-right: 10px;
    background-image: url("~@/assets/sxw-pest/right.png");
    background-repeat: no-repeat;
    background-size: 60px;
    cursor: pointer;
  }
}
::v-deep .el-dialog {
  .el-dialog__header {
    background-color: #006e91;
  }
  .el-dialog__title {
    color: #fff;
  }

  border: none !important;
  .el-dialog__body {
    background-color: #006e91;
  }
}
// .el-dialog__wrapper .el-dialog{
//    border: #23fff8 1px solid;
// }
</style>
